<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>好学APP - 首页</title>
    <link rel="stylesheet" href="css/styles.css">
    <!-- Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="ios-device">
        <!-- iOS 状态栏 -->
        <div class="status-bar">
            <div class="status-bar-left">
                <span class="status-bar-time">9:41</span>
            </div>
            <div class="status-bar-right">
                <span class="status-bar-signal"><i class="fas fa-signal"></i></span>
                <span class="status-bar-wifi"><i class="fas fa-wifi"></i></span>
                <span class="status-bar-battery"><i class="fas fa-battery-full"></i></span>
            </div>
        </div>
        
        <!-- 应用内容区域 -->
        <div class="app-content">
            <!-- 欢迎区域 -->
            <div class="welcome-header">
                <div class="flex justify-between items-center mb-4">
                    <div>
                        <h1 class="welcome-title">你好，小明</h1>
                        <p class="welcome-subtitle">今天是学习的好日子！</p>
                    </div>
                    <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1760&q=80" alt="用户头像" class="avatar">
                </div>
                
                <div class="flex justify-between mt-3">
                    <button class="btn btn-primary">
                        <i class="fas fa-play btn-icon"></i>继续学习
                    </button>
                    <button class="btn btn-outline">
                        <i class="fas fa-plus btn-icon"></i>新主题
                    </button>
                </div>
            </div>
            
            <!-- 学习统计 -->
            <div class="stats-container">
                <div class="stat-card">
                    <div class="stat-value">7</div>
                    <div class="stat-label">连续学习天数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">85%</div>
                    <div class="stat-label">知识掌握度</div>
                </div>
            </div>
            
            <!-- 今日目标 -->
            <div class="card">
                <h2 class="font-bold mb-2">今日目标</h2>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: 65%;"></div>
                </div>
                <div class="flex justify-between mt-1">
                    <span class="text-secondary">已完成 2/3 个任务</span>
                    <span class="text-primary">65%</span>
                </div>
                
                <div class="list mt-3">
                    <div class="list-item">
                        <div class="list-item-content">
                            <div class="list-item-title">完成量子力学基础概念学习</div>
                            <div class="list-item-subtitle">物理 · 30分钟</div>
                        </div>
                        <div class="list-item-right">
                            <i class="fas fa-check-circle text-success"></i>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="list-item-content">
                            <div class="list-item-title">费曼笔记：薛定谔方程</div>
                            <div class="list-item-subtitle">物理 · 20分钟</div>
                        </div>
                        <div class="list-item-right">
                            <i class="fas fa-check-circle text-success"></i>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="list-item-content">
                            <div class="list-item-title">向朋友讲解波粒二象性</div>
                            <div class="list-item-subtitle">物理 · 15分钟</div>
                        </div>
                        <div class="list-item-right">
                            <i class="far fa-circle text-tertiary"></i>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 推荐学习 -->
            <div class="p-3">
                <div class="flex justify-between items-center mb-2">
                    <h2 class="font-bold">推荐学习</h2>
                    <a href="#" class="text-primary">查看全部</a>
                </div>
                
                <div class="card">
                    <div class="flex">
                        <div class="mr-3">
                            <div style="width: 80px; height: 80px; border-radius: 12px; overflow: hidden;">
                                <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1760&q=80" alt="量子力学" style="width: 100%; height: 100%; object-fit: cover;">
                            </div>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-bold mb-1">量子力学进阶</h3>
                            <p class="text-secondary mb-2 text-sm">深入理解量子纠缠与量子隧穿效应</p>
                            <div class="flex items-center">
                                <span class="badge badge-primary mr-2">物理</span>
                                <span class="text-secondary text-sm"><i class="far fa-clock mr-1"></i>45分钟</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card mt-3">
                    <div class="flex">
                        <div class="mr-3">
                            <div style="width: 80px; height: 80px; border-radius: 12px; overflow: hidden;">
                                <img src="https://images.unsplash.com/photo-1532094349884-543bc11b234d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1760&q=80" alt="微积分" style="width: 100%; height: 100%; object-fit: cover;">
                            </div>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-bold mb-1">微积分基础</h3>
                            <p class="text-secondary mb-2 text-sm">从零开始学习微积分的核心概念</p>
                            <div class="flex items-center">
                                <span class="badge badge-primary mr-2">数学</span>
                                <span class="text-secondary text-sm"><i class="far fa-clock mr-1"></i>60分钟</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部导航栏 -->
        <div class="tab-bar">
            <div class="tab-item active" id="tab-home">
                <div class="tab-icon"><i class="fas fa-home"></i></div>
                <div class="tab-label">首页</div>
            </div>
            <div class="tab-item" id="tab-learn">
                <div class="tab-icon"><i class="fas fa-book-open"></i></div>
                <div class="tab-label">学习</div>
            </div>
            <div class="tab-item" id="tab-note">
                <div class="tab-icon"><i class="fas fa-edit"></i></div>
                <div class="tab-label">笔记</div>
            </div>
            <div class="tab-item" id="tab-profile">
                <div class="tab-icon"><i class="fas fa-user"></i></div>
                <div class="tab-label">我的</div>
            </div>
            <div class="tab-item" id="tab-settings">
                <div class="tab-icon"><i class="fas fa-cog"></i></div>
                <div class="tab-label">设置</div>
            </div>
        </div>
    </div>
</body>
</html>